<script setup>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
</script>

<template>
  <div class="app">
    <h1>{{ msg }}{{ studentName }}!</h1>
    <School />
    <!-- 方式一：绑定自定义事件 'yesen' -->
    <!-- <Student @yesen="getStudentName" /> -->
    <!-- 方式二：绑定自定义事件 'yesen' -->
    <!-- <Student ref="student" /> -->

    <!-- vue 认为：给**组件**绑定的**都是自定义事件**，如要绑定原生DOM事件，要加上 `native` 修饰 -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你好，",
      studentName: "",
    };
  },
  methods: {
    getStudentName(name) {
      this.studentName = name;
      console.log("got student's name:", name);
    },
    show() {
      window.alert("原生click事件");
    },
  },
  mounted() {
    // 方式二：通过 ref 的 $on 监听事件
    // this.$refs.student.$on("yesen", this.getStudentName);

    this.$refs.student.$on("yesen", (name) => {
      this.studentName = name;
    });
  },
};
</script>

<style scoped>
.app {
  background: gray;
}
</style>
